<template>
  <page-view class="flex-column" v-if="!isLoading">
    <title-bar :show-back="true" @back="$router.back()">光哥推荐-菜品详细</title-bar>
    <div class="content-box flex-1">
      <div class="wrapper" ref="wrapper">
        <div class="content">
          <div class="img-box">
            <img v-lazy="baseURL + foodDetail.food_img" alt="">
            <div class="right-icon-box" @click="addToShopCart">
              <span class="iconfont icontianjia1"></span>
              购物车
            </div>
          </div>
          <div class="food-info">
            <div class="food-info-item">
              <div>菜品名称：</div>
              {{ foodDetail.food_name }}
            </div>
            <div class="food-info-item">
              <div>菜品价格：</div>
              {{ foodDetail.price }}
            </div>
            <div class="food-info-item">
              <div>菜品分类：</div>
              {{ foodDetail.cid }}
            </div>
            <div class="food-info-item food_desc">
              {{ foodDetail.food_desc }}
            </div>
          </div>
          <div class="comment-list">
            <h3 class="text-primary" style="margin-top:0.05rem;margin-left:0.05rem">最新评论</h3>
            <comment-item v-for="(item) in commentList" :key="item.id" :citem="item"></comment-item>
            <p v-if="commentList.length == 0" class="text-second flex-row j-c" style="font-size:0.14rem">暂无评论</p>
            <p v-if="pageIndex==pageCount&&isLoading==false" class="flex-row a-c j-c"
               style="color: #bbbbbb;font-size: 0.14rem;padding: 5px">--我是有底线的--</p>
            <loading-box v-if="isLoadingComment">正在加载评论。。。</loading-box>
          </div>
        </div>
      </div>
    </div>
    <shop-cart-bar ref="shopCartBar" @click="toShopCartList"></shop-cart-bar>
  </page-view>
</template>
<script>
import commentItem from '../components/comment-item.vue';
import Api from '../utils/Api';
import loadingBox from "../components/loading-box.vue";
import BScorll from "better-scroll";
import shopCartBar from "@/components/shop-cart-bar";

export default {
  name: "foodDetail",
  data() {
    return {
      foodDetail: {
        id: null
      },
      isLoading: true,
      isLoadingComment: true,
      commentList: [],
      pageIndex: 1,
      pageCount: 1,
      pageEnd: 1,
      pageStart: 1,
      totalCount: 0,
      scroll: null
    }
  },
  created() {
    this.foodDetail.id = this.$route.params.id;
    this.getFoodDetailById(this.foodDetail.id);
    this.getCommnetList(this.foodDetail.id, this.pageIndex);
  },
  methods: {
    async getFoodDetailById(id) {
      this.isLoading = true;
      this.showLoading("正在加载菜品数据。。。")
      let result = await Api.foodInfo.findById(id);
      this.foodDetail = result;
      this.isLoading = false;
    },
    async getCommnetList(fid, pageIndex = 1) {
      this.isLoadingComment = true;
      let result = await Api.commentInfo.getCommentInfoById({
        fid, pageIndex
      });
      this.pageIndex = result.pageIndex;
      this.pageCount = result.pageCount;
      this.pageStart = result.pageStart;
      this.pageEnd = result.pageEnd;
      this.totalCount = result.totalCount;
      this.commentList.push(...result.listData);
      this.isLoadingComment = false;
    },
    setBetterScroll() {
      if (!this.scroll) {
        this.$nextTick(() => {
          this.scroll = new BScorll(this.$refs.wrapper, {
            click: true,
            pullUpLoad: true,
            pullDownRefresh: true
          });
          this.scroll.on("pullingUp", async () => {
            if (this.pageIndex < this.pageCount && this.isLoadingComment == false) {
              let newIndex = +this.pageIndex + 1;
              await this.getCommnetList(this.foodDetail.id, newIndex);
            } else {
              this.scroll.finishPullUp();
            }
          });
          this.scroll.on("pullingDown", async () => {
            this.pageIndex = 1;
            this.commentList = [];
            await this.getCommnetList(this.foodDetail.id, this.pageIndex);
            this.scroll.finishPullDown();
          })
        })
      } else {
        this.$nextTick(() => {
          this.scroll.refresh();
        })
      }
    },
    async addToShopCart() {
      let result = await Api.shopCart.addToShopCart({
        fid: this.foodDetail.id,
        count: 1
      })
      if (result){
        this.$msg.success("添加购物车成功");
        this.$refs.shopCartBar.getMyShopCartTotalInfo();
      }
    },
    toShopCartList(){
      this.$router.push({name:'shopCartList'});
    }
  },
  updated() {
    this.setBetterScroll();
  },
  components: {
    commentItem, loadingBox,
    shopCartBar
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/com.scss";

.content-box {
  .wrapper {
    height: 100%;
    overflow: hidden;
    @include md-box() {
      & {
        overflow: auto;
      }
    }
  }

  .img-box {
    height: 2.2rem;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .right-icon-box {
      color: $primaryColor;
      height: .25rem;
      border: 1px solid currentColor;
      width: .7rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: .18rem;
      font-weight: bold;
      font-size: .14rem;
      position: absolute;
      right: .05rem;
      top: .05rem;
      background-color: rgba(255, 255, 255, 0.8);
    }
  }

  .food-info {
    box-sizing: border-box;
    padding: .05rem;

    .food-info-item {
      display: flex;
      font-size: .14rem;
      margin-top: .05rem;

      div {
        font-weight: bold;
      }

      &.food_desc {
        text-indent: 2em;
      }
    }
  }
}
</style>